<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p><strong class="ql-size-large"
               style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);"><em><u>在前端开发中，有时我们需要在浏览器中实现对表格的灵活操作。本文将介绍如何使用原生
        Vue 2 结合 HTML 和 CSS 来实现一个可以在浏览器中进行多种操作的表格。</u></em></strong></p>
    <p><br></p>
    <h1><strong
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">一、功能概述</strong>
    </h1>
    <p><br></p>
    <p><span style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">这段代码使用 Vue 2 构建了一个具有以下功能的表格：</span>
    </p>
    <p><br></p>
    <ol>
        <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><strong
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">可编辑的单元格</strong><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">：通过使用</span><code
                style="background-color: rgb(255, 255, 255); color: initial;">contenteditable="true"</code><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">的</span><code
                style="background-color: rgb(255, 255, 255); color: initial;">&lt;div&gt;</code><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">元素，实现了表格单元格的可编辑功能。用户可以在单元格中输入文本，并通过</span><code
                style="background-color: rgb(255, 255, 255); color: initial;">@input</code><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">事件监听器实时更新数据。</span>
        </li>
        <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><strong
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">调整单元格大小</strong><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">：利用鼠标事件实现了对表格单元格高度和宽度的调整。当用户点击单元格底部或右侧的特定区域时，可以通过拖动鼠标来改变单元格的大小。</span>
        </li>
        <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><strong
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">添加和删除行与列</strong><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">：提供了按钮来方便地添加和删除表格的行和列。点击相应按钮即可执行对应的操作，同时会自动更新表格的数据结构。</span>
        </li>
        <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><strong
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">插入图片</strong><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">：用户可以在特定的单元格中插入图片。通过点击 “插入图片” 按钮，会生成一个隐藏的文件输入框，用户选择图片文件后，会将图片插入到当前选中的单元格中。</span>
        </li>
        <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><strong
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">右键菜单</strong><span
                style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">：实现了一个右键上下文菜单，当用户在表格的单元格上右键点击时，会显示一个包含各种操作选项的菜单，如添加行、删除行、添加列、删除列和插入图片等。</span>
        </li>
    </ol>
    <h1><strong
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">二、技术实现</strong>
    </h1>
    <p><br></p>
    <h2><strong style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">1. Vue
        模板结构</strong></h2>
    <p><br></p>
    <div class="ql-code-block-container" spellcheck="false">
        <div class="ql-code-block" data-language="plain">&lt;template&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;div&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;div id="tableContainer"&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;table&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;tbody&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;tr v-for="(rowData, rowIndex) in tableList"
            :key="rowIndex"&gt;
        </div>
        <div class="ql-code-block" data-language="plain"> &lt;td v-for="(header,colIndex) in tableHeaders"</div>
        <div class="ql-code-block" data-language="plain"> :key="`myTd_${rowIndex}_${colIndex}`"</div>
        <div class="ql-code-block" data-language="plain"> :id="'myTd_' + rowIndex + '_' + colIndex"</div>
        <div class="ql-code-block" data-language="plain"> class="tdBottomClass"&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;!--文本框--&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;div class="editDiv" contenteditable="true"</div>
        <div class="ql-code-block" data-language="plain"> :id="'cell_' + rowIndex + '_' + colIndex"</div>
        <div class="ql-code-block" data-language="plain"> @input="adjustHeight($event.target, rowIndex, colIndex)"&gt;
        </div>
        <div class="ql-code-block" data-language="plain"> &lt;/div&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;!--不使用伪元素来显示右边界,用div--&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;div :id="'right_' + rowIndex + '_' + colIndex"
            class="tdRightClass"&gt;&lt;/div&gt;
        </div>
        <div class="ql-code-block" data-language="plain"> &lt;/td&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/tr&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/tbody&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/table&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/div&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;div id="two"&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;!-- 操作按钮 --&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;button @click="addRow"&gt;添加一行&lt;/button&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;button @click="deleteRow"&gt;删除一行&lt;/button&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;button @click="addColumn"&gt;添加一列&lt;/button&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;button @click="deleteColumn"&gt;删除一列&lt;/button&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;button @click="addImage"&gt;插入图片&lt;/button&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/div&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;div id="context-menu" class="hidden"&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;ul&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;li&gt;&lt;a href="#" @click="addRow"&gt;添加一行&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;li&gt;&lt;a href="#" @click="deleteRow"&gt;删除一行&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;li&gt;&lt;a href="#" @click="addColumn"&gt;添加一列&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;li&gt;&lt;a href="#" @click="deleteColumn"&gt;删除一列&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;li&gt;&lt;a href="#" @click="addImage"&gt;插入图片&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/ul&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/div&gt;</div>
        <div class="ql-code-block" data-language="plain"> &lt;/div&gt;</div>
        <div class="ql-code-block" data-language="plain">&lt;/template&gt;</div>
    </div>
    <p><br></p>
    <p><span
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">在模板中，使用</span><code
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">v-for</code><span
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">循环生成表格的行和列，每个单元格包含一个可编辑的</span><code
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">&lt;div&gt;</code><span
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">元素和用于调整大小的辅助</span><code
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">&lt;div&gt;</code><span
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">元素。同时，页面上还有操作按钮和右键上下文菜单的 HTML 结构。</span>
    </p>
    <p><br></p>
    <h2><strong style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">2. Vue
        脚本部分</strong></h2>
    <p><br></p>
    <div class="ql-code-block-container" spellcheck="false">
        <div class="ql-code-block" data-language="plain">export default {</div>
        <div class="ql-code-block" data-language="plain"> data() {</div>
        <div class="ql-code-block" data-language="plain"> return {</div>
        <div class="ql-code-block" data-language="plain"> tableHeaders: ['col1', 'col2', 'col3'],</div>
        <div class="ql-code-block" data-language="plain"> tableList: [</div>
        <div class="ql-code-block" data-language="plain"> {</div>
        <div class="ql-code-block" data-language="plain"> col1: '',</div>
        <div class="ql-code-block" data-language="plain"> col2: '',</div>
        <div class="ql-code-block" data-language="plain"> col3: '',</div>
        <div class="ql-code-block" data-language="plain"> }</div>
        <div class="ql-code-block" data-language="plain"> ],</div>
        <div class="ql-code-block" data-language="plain"> currentClickEditDivCellId: '',</div>
        <div class="ql-code-block" data-language="plain"> };</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> methods: {</div>
        <div class="ql-code-block" data-language="plain"> adjustHeight(editDiv, rowIndex, colIndex) {</div>
        <div class="ql-code-block" data-language="plain"> // 调整单元格高度并实现双向数据绑定</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> getHeightById(id) {</div>
        <div class="ql-code-block" data-language="plain"> // 获取元素高度</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> getWidthById(id) {</div>
        <div class="ql-code-block" data-language="plain"> // 获取元素宽度</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> changeHeight(id, height) {</div>
        <div class="ql-code-block" data-language="plain"> // 改变元素高度</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> changeWidth(id, width) {</div>
        <div class="ql-code-block" data-language="plain"> // 改变元素宽度</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> getTdPadding() {</div>
        <div class="ql-code-block" data-language="plain"> // 获取单元格内边距</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> getTdBorder() {</div>
        <div class="ql-code-block" data-language="plain"> // 获取单元格边框</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> onMouseDownTdHeight(event) {</div>
        <div class="ql-code-block" data-language="plain"> // 处理鼠标按下调整单元格高度事件</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> onMouseDownTdWidth(event) {</div>
        <div class="ql-code-block" data-language="plain"> // 处理鼠标按下调整单元格宽度事件</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> addRow() {</div>
        <div class="ql-code-block" data-language="plain"> // 添加一行数据</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> deleteRow() {</div>
        <div class="ql-code-block" data-language="plain"> // 删除一行数据</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> addColumn() {</div>
        <div class="ql-code-block" data-language="plain"> // 添加一列数据</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> deleteColumn() {</div>
        <div class="ql-code-block" data-language="plain"> // 删除一列数据</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> addImage() {</div>
        <div class="ql-code-block" data-language="plain"> // 插入图片</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> startRightKeyListener() {</div>
        <div class="ql-code-block" data-language="plain"> // 启动右键菜单监听器</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> refreshRightKeyListener() {</div>
        <div class="ql-code-block" data-language="plain"> // 刷新右键菜单监听器</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> closeRightKeyListener() {</div>
        <div class="ql-code-block" data-language="plain"> // 关闭右键菜单监听器</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> mounted() {</div>
        <div class="ql-code-block" data-language="plain"> // 添加鼠标事件监听器和启动右键菜单监听器</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain"> beforeDestroy() {</div>
        <div class="ql-code-block" data-language="plain"> // 移除鼠标事件监听器和关闭右键菜单监听器</div>
        <div class="ql-code-block" data-language="plain"> },</div>
        <div class="ql-code-block" data-language="plain">};</div>
    </div>
    <p><br></p>
    <p><span style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">在脚本部分，定义了各种方法来实现表格的不同功能。包括调整单元格高度和宽度、添加和删除行与列、插入图片以及处理右键菜单的相关操作。在</span><code
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">mounted</code><span
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">钩子函数中添加了鼠标事件监听器和启动右键菜单监听器，在</span><code
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">beforeDestroy</code><span
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">钩子函数中移除这些监听器。</span>
    </p>
    <p><br></p>
    <h2><strong style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">3. CSS
        样式</strong></h2>
    <div class="ql-code-block-container" spellcheck="false">
        <div class="ql-code-block" data-language="plain">table {</div>
        <div class="ql-code-block" data-language="plain"> border-collapse: collapse;</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">th,</div>
        <div class="ql-code-block" data-language="plain">td {</div>
        <div class="ql-code-block" data-language="plain"> border: 1px solid black;</div>
        <div class="ql-code-block" data-language="plain"> padding: 0;</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">.tdBottomClass {</div>
        <div class="ql-code-block" data-language="plain"> // 底部调整条样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">.tdRightClass {</div>
        <div class="ql-code-block" data-language="plain"> // 右侧调整条样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">td {</div>
        <div class="ql-code-block" data-language="plain"> // 单元格默认宽度和高度</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">.editDiv {</div>
        <div class="ql-code-block" data-language="plain"> // 可编辑区域样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">.editDiv:focus {</div>
        <div class="ql-code-block" data-language="plain"> // 聚焦时的样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">#context-menu {</div>
        <div class="ql-code-block" data-language="plain"> // 右键菜单样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">#context-menu ul {</div>
        <div class="ql-code-block" data-language="plain"> // 右键菜单项列表样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">#context-menu li {</div>
        <div class="ql-code-block" data-language="plain"> // 右键菜单项样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">#context-menu li:hover {</div>
        <div class="ql-code-block" data-language="plain"> // 右键菜单项鼠标悬停样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
        <div class="ql-code-block" data-language="plain">.hidden {</div>
        <div class="ql-code-block" data-language="plain"> // 隐藏样式</div>
        <div class="ql-code-block" data-language="plain">}</div>
    </div>
    <p><br></p>
    <p><span style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">通过 CSS 样式对表格、单元格、可编辑区域和右键菜单进行了样式设置，使其在外观上更加美观和易于操作。</span>
    </p>
    <p><br></p>
    <h1><strong
            style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-deep-text-color);">三、总结</strong>
    </h1>
    <p><br></p>
    <p><span style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">通过原生 Vue 2、HTML 和 CSS 的结合，我们实现了一个在浏览器中可以进行多种操作的表格。这个表格具有可编辑的单元格、可调整大小的功能、添加和删除行与列的操作以及插入图片的能力，同时还提供了方便的右键上下文菜单。这种实现方式可以为前端开发中的表格操作需求提供一种有效的解决方案，同时也展示了 Vue 在构建复杂用户界面方面的强大能力。</span>
    </p>
    <p><br></p>
    <p><span style="background-color: rgb(255, 255, 255); color: var(--md-box-samantha-normal-text-color);">希望这篇博客对你理解如何使用原生 Vue 2 实现浏览器操作表格有所帮助！如果你有任何问题或建议，欢迎在评论区留言。</span>
    </p>
    <h1>四、演示</h1>
    <blockquote>表格选中及文本编辑</blockquote>
    <p><br></p>
    <p>
        <img src="">
    </p>
    <p><br></p>
    <blockquote>鼠标可拉伸单元格</blockquote>
    <blockquote>右键菜单</blockquote>
    <blockquote>图片插入</blockquote>
    <blockquote><br></blockquote>
    <h1>五、源码</h1>
    <p>源码如下：</p>
    <div class="ql-code-block-container" spellcheck="false">
        <div class="ql-code-block">&lt;template&gt;</div>
        <div class="ql-code-block"> &lt;div&gt;</div>
        <div class="ql-code-block"> &lt;div id="tableContainer"&gt;</div>
        <div class="ql-code-block"> &lt;table&gt;</div>
        <div class="ql-code-block"> &lt;tbody&gt;</div>
        <div class="ql-code-block"> &lt;tr v-for="(rowData, rowIndex) in tableList" :key="rowIndex"&gt;</div>
        <div class="ql-code-block"> &lt;td v-for="(header,colIndex) in tableHeaders"</div>
        <div class="ql-code-block"> :key="`myTd_${rowIndex}_${colIndex}`"</div>
        <div class="ql-code-block"> :id="'myTd_' + rowIndex + '_' + colIndex"</div>
        <div class="ql-code-block"> class="tdBottomClass"&gt;</div>
        <div class="ql-code-block"> &lt;!--文本框--&gt;</div>
        <div class="ql-code-block"> &lt;div class="editDiv" contenteditable="true"</div>
        <div class="ql-code-block"> :id="'cell_' + rowIndex + '_' + colIndex"</div>
        <div class="ql-code-block"> @input="adjustHeight($event.target, rowIndex, colIndex)"&gt;</div>
        <div class="ql-code-block"> &lt;/div&gt;</div>
        <div class="ql-code-block"> &lt;!--不使用伪元素来显示右边界,用div--&gt;</div>
        <div class="ql-code-block"> &lt;div :id="'right_' + rowIndex + '_' + colIndex" class="tdRightClass"&gt;&lt;/div&gt;</div>
        <div class="ql-code-block"> &lt;/td&gt;</div>
        <div class="ql-code-block"> &lt;/tr&gt;</div>
        <div class="ql-code-block"> &lt;/tbody&gt;</div>
        <div class="ql-code-block"> &lt;/table&gt;</div>
        <div class="ql-code-block"> &lt;/div&gt;</div>
        <div class="ql-code-block"> &lt;div id="context-menu" class="hidden"&gt;</div>
        <div class="ql-code-block"> &lt;ul&gt;</div>
        <div class="ql-code-block"> &lt;li&gt;&lt;a href="#" @click="addRow"&gt;添加一行&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block"> &lt;li&gt;&lt;a href="#" @click="deleteRow"&gt;删除一行&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block"> &lt;li&gt;&lt;a href="#" @click="addColumn"&gt;添加一列&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block"> &lt;li&gt;&lt;a href="#" @click="deleteColumn"&gt;删除一列&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block"> &lt;li&gt;&lt;a href="#" @click="addImage"&gt;插入图片&lt;/a&gt;&lt;/li&gt;</div>
        <div class="ql-code-block"> &lt;/ul&gt;</div>
        <div class="ql-code-block"> &lt;/div&gt;</div>
        <div class="ql-code-block"> &lt;/div&gt;</div>
        <div class="ql-code-block">&lt;/template&gt;</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">&lt;script&gt;</div>
        <div class="ql-code-block">export default {</div>
        <div class="ql-code-block"> data() {</div>
        <div class="ql-code-block"> return {</div>
        <div class="ql-code-block"> tableHeaders: ['col1', 'col2', 'col3'],</div>
        <div class="ql-code-block"> tableList: [</div>
        <div class="ql-code-block"> // 一个对象是一行元素 col123分别代表123列的数据</div>
        <div class="ql-code-block"> {</div>
        <div class="ql-code-block"> col1: '',</div>
        <div class="ql-code-block"> col2: '',</div>
        <div class="ql-code-block"> col3: '',</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> ],</div>
        <div class="ql-code-block"> // 单元格的id 并非textarea的id</div>
        <div class="ql-code-block"> currentClickEditDivCellId:'',</div>
        <div class="ql-code-block"> };</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> methods: {</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 调整单元格高度</div>
        <div class="ql-code-block"> * @param editDiv</div>
        <div class="ql-code-block"> * @param rowIndex</div>
        <div class="ql-code-block"> * @param colIndex</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> adjustHeight(editDiv, rowIndex, colIndex) {</div>
        <div class="ql-code-block"> editDiv.style.height = "100%";</div>
        <div class="ql-code-block"> editDiv.style.marginTop = 0 + "px";</div>
        <div class="ql-code-block"> editDiv.style.height = editDiv.scrollHeight + "px";</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block"> // 给div模拟双向数据绑定</div>
        <div class="ql-code-block"> const header = this.tableHeaders[colIndex];</div>
        <div class="ql-code-block"> this.tableList[rowIndex][header] = editDiv.innerHTML;</div>
        <div class="ql-code-block"> // console.log(editDiv.innerHTML)</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block"> console.log('shuju ',this.tableList[0]['col1'])</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 获取单元格高度</div>
        <div class="ql-code-block"> * @param id</div>
        <div class="ql-code-block"> * @returns {string}</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> getHeightById(id) {</div>
        <div class="ql-code-block"> const td = document.getElementById(id);</div>
        <div class="ql-code-block"> const computedStyle = window.getComputedStyle(td);</div>
        <div class="ql-code-block"> const height = computedStyle.height;</div>
        <div class="ql-code-block"> return height.split('px')[0];</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 获取单元格宽度</div>
        <div class="ql-code-block"> * @param id</div>
        <div class="ql-code-block"> * @returns {string}</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> getWidthById(id) {</div>
        <div class="ql-code-block"> const td = document.getElementById(id);</div>
        <div class="ql-code-block"> const computedStyle = window.getComputedStyle(td);</div>
        <div class="ql-code-block"> const width = computedStyle.width;</div>
        <div class="ql-code-block"> return width.split('px')[0];</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 修改单元格高度</div>
        <div class="ql-code-block"> * @param id</div>
        <div class="ql-code-block"> * @param height</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> changeHeight(id, height) {</div>
        <div class="ql-code-block"> const td = document.getElementById(id);</div>
        <div class="ql-code-block"> td.style.height = height;</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 修改单元格宽度</div>
        <div class="ql-code-block"> * @param id</div>
        <div class="ql-code-block"> * @param width</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> changeWidth(id, width) {</div>
        <div class="ql-code-block"> const td = document.getElementById(id);</div>
        <div class="ql-code-block"> td.style.width = width;</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 获取单元格边框</div>
        <div class="ql-code-block"> * @returns {string}</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> getTdPadding() {</div>
        <div class="ql-code-block"> const td = document.querySelector('td');</div>
        <div class="ql-code-block"> return window.getComputedStyle(td).padding;</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 获取单元格边框</div>
        <div class="ql-code-block"> * @returns {string}</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> getTdBorder() {</div>
        <div class="ql-code-block"> const td = document.querySelector('td');</div>
        <div class="ql-code-block"> return window.getComputedStyle(td).border;</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 鼠标按下单元格高度</div>
        <div class="ql-code-block"> * @param event</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> onMouseDownTdHeight(event) {</div>
        <div class="ql-code-block"> const id = event.target.id;</div>
        <div class="ql-code-block"> // console.log('当前点击的id',id)</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block"> this.currentClickEditDivCellId = id</div>
        <div class="ql-code-block"> // console.log(event.target.classList.contains('tdBottomClass'))</div>
        <div class="ql-code-block"> if (!event.target.classList.contains('tdBottomClass')) {</div>
        <div class="ql-code-block"> return;</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> const tdRow = id.toString().split('_')[id.toString().split('_').length - 2];</div>
        <div class="ql-code-block"> const tdCol = id.toString().split('_')[id.toString().split('_').length - 1];</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block"> let mouseY = event.clientY;</div>
        <div class="ql-code-block"> let relativeY = mouseY - document.querySelector('table').offsetTop;</div>
        <div class="ql-code-block"> document.addEventListener('mouseup', onMouseUp);</div>
        <div class="ql-code-block"> document.addEventListener('mousemove', onMouseMove);</div>
        <div class="ql-code-block"> function onMouseUp(event) {</div>
        <div class="ql-code-block"> document.removeEventListener('mousemove', onMouseMove);</div>
        <div class="ql-code-block"> document.removeEventListener('mouseup', onMouseUp);</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function onMouseMove(event) {</div>
        <div class="ql-code-block"> mouseY = event.clientY;</div>
        <div class="ql-code-block"> relativeY = mouseY - document.querySelector('table').offsetTop;</div>
        <div class="ql-code-block"> let tdMinHeight = 60;</div>
        <div class="ql-code-block"> if (relativeY &gt; tdMinHeight) {</div>
        <div class="ql-code-block"> let currentTd = document.getElementById(`myTd_${tdRow}_${tdCol}`);</div>
        <div class="ql-code-block"> let offsetTop = currentTd.offsetTop - document.querySelector('table').offsetTop;
        </div>
        <div class="ql-code-block"> changeHeight(`myTd_${tdRow}_${tdCol}`, relativeY - offsetTop + 'px');</div>
        <div class="ql-code-block"> } else if (relativeY &lt; tdMinHeight) {</div>
        <div class="ql-code-block"> changeHeight(`myTd_${tdRow}_${tdCol}`, tdMinHeight + 'px');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function changeHeight(id, height) {</div>
        <div class="ql-code-block"> const td = document.getElementById(id);</div>
        <div class="ql-code-block"> td.style.height = height;</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 鼠标按下单元格宽度</div>
        <div class="ql-code-block"> * @param event</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> onMouseDownTdWidth(event) {</div>
        <div class="ql-code-block"> if (!event.target.classList.contains('tdRightClass')) {</div>
        <div class="ql-code-block"> return;</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> const id = event.target.id;</div>
        <div class="ql-code-block"> const tdRow = id.toString().split('_')[id.toString().split('_').length - 2];</div>
        <div class="ql-code-block"> const tdCol = id.toString().split('_')[id.toString().split('_').length - 1];</div>
        <div class="ql-code-block"> let mouseX = event.clientX;</div>
        <div class="ql-code-block"> let relativeX = mouseX - document.querySelector('table').offsetLeft;</div>
        <div class="ql-code-block"> document.addEventListener('mouseup', onMouseUp);</div>
        <div class="ql-code-block"> document.addEventListener('mousemove', onMouseMove);</div>
        <div class="ql-code-block"> function onMouseUp(event) {</div>
        <div class="ql-code-block"> document.removeEventListener('mousemove', onMouseMove);</div>
        <div class="ql-code-block"> document.removeEventListener('mouseup', onMouseUp);</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function onMouseMove(event) {</div>
        <div class="ql-code-block"> mouseX = event.clientX;</div>
        <div class="ql-code-block"> relativeX = mouseX - document.querySelector('table').offsetLeft;</div>
        <div class="ql-code-block"> let tdMinWidth = 150;</div>
        <div class="ql-code-block"> if (relativeX &gt; tdMinWidth) {</div>
        <div class="ql-code-block"> let currentTd = document.getElementById(`myTd_${tdRow}_${tdCol}`);</div>
        <div class="ql-code-block"> let offsetLeft = currentTd.offsetLeft -
            document.querySelector('table').offsetLeft;
        </div>
        <div class="ql-code-block"> changeWidth(`myTd_${tdRow}_${tdCol}`, relativeX - offsetLeft + 'px');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> else if (relativeX &lt; tdMinWidth) {</div>
        <div class="ql-code-block"> changeWidth(`myTd_${tdRow}_${tdCol}`, tdMinWidth + 'px');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function changeWidth(id, width) {</div>
        <div class="ql-code-block"> const td = document.getElementById(id);</div>
        <div class="ql-code-block"> td.style.width = width;</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 添加行</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> addRow() {</div>
        <div class="ql-code-block"> const newRow = {};</div>
        <div class="ql-code-block"> this.tableHeaders.forEach(header =&gt; {</div>
        <div class="ql-code-block"> newRow[header] = '';</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> this.tableList.push(newRow);</div>
        <div class="ql-code-block"> this.$nextTick(() =&gt; {</div>
        <div class="ql-code-block"> this.refreshRightKeyListener()</div>
        <div class="ql-code-block"> })</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 删除行</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> deleteRow() {</div>
        <div class="ql-code-block"> this.tableList.pop();</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 添加列</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> addColumn() {</div>
        <div class="ql-code-block"> const newHeader = `col${this.tableHeaders.length + 1}`;</div>
        <div class="ql-code-block"> this.tableHeaders.push(newHeader);</div>
        <div class="ql-code-block"> this.tableList.forEach(row =&gt; {</div>
        <div class="ql-code-block"> row[newHeader] = '';</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> this.$nextTick(() =&gt; {</div>
        <div class="ql-code-block"> this.refreshRightKeyListener()</div>
        <div class="ql-code-block"> })</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 删除列</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> deleteColumn() {</div>
        <div class="ql-code-block"> if (this.tableHeaders.length &gt; 0) {</div>
        <div class="ql-code-block"> const removedHeader = this.tableHeaders.pop();</div>
        <div class="ql-code-block"> this.tableList.forEach(row =&gt; {</div>
        <div class="ql-code-block"> delete row[removedHeader];</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 插入图片</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> addImage: function () {</div>
        <div class="ql-code-block"> // alert('尚未完善!禁用!')</div>
        <div class="ql-code-block"> // return;</div>
        <div class="ql-code-block"> if (this.currentClickEditDivCellId === '') {</div>
        <div class="ql-code-block"> return</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> // 向id为currentClickEditDivCellId的元素内插入图片</div>
        <div class="ql-code-block"> // console.log(this.currentClickEditDivCellId);</div>
        <div class="ql-code-block"> let currentCell = document.getElementById(this.currentClickEditDivCellId);</div>
        <div class="ql-code-block"> let currentClickEditDivCellId = this.currentClickEditDivCellId</div>
        <div class="ql-code-block"> // 生成一个file类型的输入框</div>
        <div class="ql-code-block"> let fileInput = document.createElement('input');</div>
        <div class="ql-code-block"> fileInput.type = 'file';</div>
        <div class="ql-code-block"> fileInput.accept = 'image/*';</div>
        <div class="ql-code-block"> fileInput.style.display = 'none';</div>
        <div class="ql-code-block"> fileInput.addEventListener('change', function (event){</div>
        <div class="ql-code-block"> const file = event.target.files[0];</div>
        <div class="ql-code-block"> console.log(file);</div>
        <div class="ql-code-block"> if (file) {</div>
        <div class="ql-code-block"> const reader = new FileReader();</div>
        <div class="ql-code-block"> reader.onload = function (e) {</div>
        <div class="ql-code-block"> const img = document.createElement('img');</div>
        <div class="ql-code-block"> img.src = e.target.result;</div>
        <div class="ql-code-block"> img.alt = '插入的图片';</div>
        <div class="ql-code-block"> img.style.maxWidth = '100px';</div>
        <div class="ql-code-block"> img.style.maxHeight = '100px';</div>
        <div class="ql-code-block"> const currentCell = document.getElementById(currentClickEditDivCellId);</div>
        <div class="ql-code-block"> currentCell.appendChild(img);</div>
        <div class="ql-code-block"> };</div>
        <div class="ql-code-block"> reader.readAsDataURL(file);</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> })</div>
        <div class="ql-code-block"> fileInput.click();</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 右键菜单的监听</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> startRightKeyListener() {</div>
        <div class="ql-code-block"> const contextMenu = document.getElementById('context-menu');</div>
        <div class="ql-code-block"> function showContextMenu(event) {</div>
        <div class="ql-code-block"> // console.log('startRightKeyListener');</div>
        <div class="ql-code-block"> event.preventDefault(); // 关闭原浏览器的右键菜单</div>
        <div class="ql-code-block"> const x = event.clientX;</div>
        <div class="ql-code-block"> const y = event.clientY;</div>
        <div class="ql-code-block"> contextMenu.style.top = y + 'px';</div>
        <div class="ql-code-block"> contextMenu.style.left = x + 'px';</div>
        <div class="ql-code-block"> contextMenu.classList.remove('hidden');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function hideContextMenu() {</div>
        <div class="ql-code-block"> contextMenu.classList.add('hidden');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> // 右键点击事件 给所有表格都加上右键点击事件</div>
        <div class="ql-code-block"> document.querySelectorAll('td').forEach(td =&gt; {</div>
        <div class="ql-code-block"> td.addEventListener('contextmenu', showContextMenu);</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> document.addEventListener('click', function (event) {</div>
        <div class="ql-code-block"> if (event.target!== contextMenu &amp;&amp;!contextMenu.contains(event.target)) {
        </div>
        <div class="ql-code-block"> hideContextMenu();</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> document.addEventListener('keydown', function (event) {</div>
        <div class="ql-code-block"> if (event.key === 'Escape') {</div>
        <div class="ql-code-block"> hideContextMenu();</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 刷新右键的监听</div>
        <div class="ql-code-block"> * */</div>
        <div class="ql-code-block"> refreshRightKeyListener(){</div>
        <div class="ql-code-block"> const contextMenu = document.getElementById('context-menu');</div>
        <div class="ql-code-block"> function showContextMenu(event) {</div>
        <div class="ql-code-block"> // console.log('startRightKeyListener');</div>
        <div class="ql-code-block"> event.preventDefault(); // 关闭原浏览器的右键菜单</div>
        <div class="ql-code-block"> const x = event.clientX;</div>
        <div class="ql-code-block"> const y = event.clientY;</div>
        <div class="ql-code-block"> contextMenu.style.top = y + 'px';</div>
        <div class="ql-code-block"> contextMenu.style.left = x + 'px';</div>
        <div class="ql-code-block"> contextMenu.classList.remove('hidden');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function hideContextMenu() {</div>
        <div class="ql-code-block"> contextMenu.classList.add('hidden');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> // 右键点击事件 给所有表格都加上右键点击事件</div>
        <div class="ql-code-block"> document.querySelectorAll('td').forEach(td =&gt; {</div>
        <div class="ql-code-block"> td.addEventListener('contextmenu', showContextMenu);</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 关闭右键菜单的监听</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> closeRightKeyListener(){</div>
        <div class="ql-code-block"> const contextMenu = document.getElementById('context-menu');</div>
        <div class="ql-code-block"> function showContextMenu(event) {</div>
        <div class="ql-code-block"> event.preventDefault();</div>
        <div class="ql-code-block"> const x = event.clientX;</div>
        <div class="ql-code-block"> const y = event.clientY;</div>
        <div class="ql-code-block"> contextMenu.style.top = y + 'px';</div>
        <div class="ql-code-block"> contextMenu.style.left = x + 'px';</div>
        <div class="ql-code-block"> contextMenu.classList.remove('hidden');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> function hideContextMenu() {</div>
        <div class="ql-code-block"> contextMenu.classList.add('hidden');</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> document.querySelectorAll('td').forEach(td =&gt; {</div>
        <div class="ql-code-block"> td.removeEventListener('contextmenu', showContextMenu);</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> // document.getElementById('keys_0_0').removeEventListener('contextmenu',
            showContextMenu);
        </div>
        <div class="ql-code-block"> document.removeEventListener('click', function (event) {</div>
        <div class="ql-code-block"> if (event.target!== contextMenu &amp;&amp;!contextMenu.contains(event.target)) {
        </div>
        <div class="ql-code-block"> hideContextMenu();</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> document.removeEventListener('keydown', function (event) {</div>
        <div class="ql-code-block"> if (event.key === 'Escape') {</div>
        <div class="ql-code-block"> hideContextMenu();</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> });</div>
        <div class="ql-code-block"> }</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 挂载完成后</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> mounted() {</div>
        <div class="ql-code-block"> // 获取table</div>
        <div class="ql-code-block"> const table = document.querySelector('table');</div>
        <div class="ql-code-block"> table.addEventListener('mousedown', this.onMouseDownTdHeight);</div>
        <div class="ql-code-block"> table.addEventListener('mousedown', this.onMouseDownTdWidth);</div>
        <div class="ql-code-block"> this.startRightKeyListener()</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 销毁前</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> beforeDestroy() {</div>
        <div class="ql-code-block"> /**</div>
        <div class="ql-code-block"> * 移除事件监听</div>
        <div class="ql-code-block"> */</div>
        <div class="ql-code-block"> document.removeEventListener('mousedown', this.onMouseDownTdHeight);</div>
        <div class="ql-code-block"> document.removeEventListener('mousedown', this.onMouseDownTdWidth);</div>
        <div class="ql-code-block"> this.closeRightKeyListener()</div>
        <div class="ql-code-block"> },</div>
        <div class="ql-code-block">};</div>
        <div class="ql-code-block">&lt;/script&gt;</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">&lt;style scoped&gt;</div>
        <div class="ql-code-block">table {</div>
        <div class="ql-code-block"> border-collapse: collapse;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block">th,</div>
        <div class="ql-code-block">td {</div>
        <div class="ql-code-block"> border: 1px solid black;</div>
        <div class="ql-code-block"> padding: 0;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">.tdBottomClass {</div>
        <div class="ql-code-block"> position: relative;</div>
        <div class="ql-code-block"> padding: 0;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block">.tdBottomClass::after {</div>
        <div class="ql-code-block"> content: "";</div>
        <div class="ql-code-block"> position: absolute;</div>
        <div class="ql-code-block"> bottom: 0;</div>
        <div class="ql-code-block"> left: 0;</div>
        <div class="ql-code-block"> width: 100%;</div>
        <div class="ql-code-block"> height: 2px;</div>
        <div class="ql-code-block"> /*background-color: rgb(218, 71, 71);*/</div>
        <div class="ql-code-block"> cursor: s-resize; /* 南北方向的调整 */</div>
        <div class="ql-code-block"> z-index: 10;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block">.tdRightClass {</div>
        <div class="ql-code-block"> /*position: relative;*/</div>
        <div class="ql-code-block"> padding: 0;</div>
        <div class="ql-code-block"> position: absolute;</div>
        <div class="ql-code-block"> top: 0;</div>
        <div class="ql-code-block"> right: 0;</div>
        <div class="ql-code-block"> width: 2px;</div>
        <div class="ql-code-block"> height: 100%;</div>
        <div class="ql-code-block"> /*background-color: rgb(218, 71, 71);*/</div>
        <div class="ql-code-block"> cursor: w-resize; /* 东西方向的调整 */</div>
        <div class="ql-code-block"> z-index: 10;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">td {</div>
        <div class="ql-code-block"> width: 150px;</div>
        <div class="ql-code-block"> height: 60px;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block">.editDiv {</div>
        <div class="ql-code-block"> text-align: left;</div>
        <div class="ql-code-block"> width: 100%;</div>
        <div class="ql-code-block"> height: 100%;</div>
        <div class="ql-code-block"> box-sizing: border-box;</div>
        <div class="ql-code-block"> resize: none;</div>
        <div class="ql-code-block"> overflow: hidden;</div>
        <div class="ql-code-block"> border: 0;</div>
        <div class="ql-code-block"> margin: 0;</div>
        <div class="ql-code-block"> padding: 2px;</div>
        <div class="ql-code-block"> word-wrap: break-word;</div>
        <div class="ql-code-block"> word-break: break-all;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block">.editDiv:focus {</div>
        <div class="ql-code-block"> text-align: left;</div>
        <div class="ql-code-block"> outline: 1px solid #369a1d;</div>
        <div class="ql-code-block"> background-color: rgba(66, 185, 131, 0.3);</div>
        <div class="ql-code-block"> height: 100%;</div>
        <div class="ql-code-block"> z-index: 99;</div>
        <div class="ql-code-block"> padding: 2px;</div>
        <div class="ql-code-block"> word-wrap: break-word;</div>
        <div class="ql-code-block"> word-break: break-all;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">#context-menu {</div>
        <div class="ql-code-block"> position: absolute;</div>
        <div class="ql-code-block"> background-color: #f9f9f9;</div>
        <div class="ql-code-block"> border: 1px solid #ccc;</div>
        <div class="ql-code-block"> box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);</div>
        <div class="ql-code-block"> padding: 5px;</div>
        <div class="ql-code-block"> z-index: 1000;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">#context-menu ul {</div>
        <div class="ql-code-block"> list-style-type: none;</div>
        <div class="ql-code-block"> margin: 0;</div>
        <div class="ql-code-block"> padding: 0;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">#context-menu li {</div>
        <div class="ql-code-block"> padding: 5px;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">#context-menu li:hover {</div>
        <div class="ql-code-block"> background-color: #e9e9e9;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block"><br></div>
        <div class="ql-code-block">.hidden {</div>
        <div class="ql-code-block"> display: none;</div>
        <div class="ql-code-block">}</div>
        <div class="ql-code-block">&lt;/style&gt;</div>
    </div>
    <p><br></p>
</div>
</body>
<script>

</script>
</html>